import React from "react";
import { Col, Radio, Row, Icon, Upload, Button, message, Divider } from "antd";
import styles from "@/pages/Account/accessSettings/siteAccess.css";
import entranceWebSeatRightBottom from "../../../assets/accessSettings/浮动-a.png";
import entranceWebSeatRightCenter from "../../../assets/accessSettings/浮动-c.png";
import entranceH5SeatRightBottom from "../../../assets/accessSettings/h5-a.png";
import entranceH5SeatRightCenter from "../../../assets/accessSettings/he-b.png";
import entranceH5SeatBottom from "../../../assets/accessSettings/h5-c.png";
import { ChromePicker } from "react-color";
import winSizeBig from "@/assets/accessSettings/默认大窗口.png";
import winSizeSmall from "@/assets/accessSettings/默认小窗口.png";

class RightAppearance extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			entranceFlag: 1,
			entranceWebImgList: [
				"/robotConfigImg/kefu.png",
				"/robotConfigImg/kefu-squ.png",
				"/robotConfigImg/kefu-vertical.png",
			],
			entranceH5ImgList: [
				"/robotConfigImg/kefu.png",
				"/robotConfigImg/kefu-squ.png",
				"/robotConfigImg/kefu-vertical.png",
			],
			showFlag: "",
			entranceWebImg: "",
			entranceH5Img: "",
			entranceH5Seat: "",
			entranceWebSeat: "",
			iconBottomColor: "",
			isShowBottomColorPicker: false,
		};
	}

	componentDidMount() {
		if (this.props.onRef) {
			this.props.onRef(this);
		}
	}

	initData = (data) => {
		this.setState({
			showFlag: data.showFlag,
			entranceFlag: data.entranceFlag,
			entranceWebImg: data.entranceWebImg,
			entranceH5Img: data.entranceH5Img,
			entranceWebSeat: data.entranceWebSeat,
			entranceH5Seat: data.entranceH5Seat,
			iconBottomColor: data.iconBottomColor,
		});
	};

	changeShowFlag = (e) => {
		this.setState({
			showFlag: e.target.value,
		});
	};

	/**
	 * 入口图标状态
	 * @returns {*}
	 */
	changeEntranceFlag = (e) => {
		this.setState({
			entranceFlag: e.target.value,
		});
	};

	handleChangeImage = (info, type) => {
		if (info.file.status === "done") {
			switch (type) {
				case "entranceWebImg":
					this.setState({
						entranceWebImg: info.file.response.url,
					});
					break;
				case "entranceH5Img":
					this.setState({
						entranceH5Img: info.file.response.url,
					});
					break;
			}
		}
	};

	beforeUpload = (file) => {
		let b = /\.(png|jpg|gif)$/;
		let a = file.name.toLowerCase();

		const pig = b.test(a);
		const isJPG = file.type;
		const isLt2M = file.size / 1024 / 1024 < 2;

		if (!pig) {
			if (!isLt2M) {
				message.error("请上传小于2M的图片");
			} else {
				message.error("请上传图片格式");
			}
		} else {
			if (!isLt2M) {
				message.error("请上传小于2M的图片");
			}
		}
		return isJPG && isLt2M && pig;
	};

	changeImg = (item, type) => {
		switch (type) {
			case "entranceWebImg":
				this.setState({
					entranceWebImg: item,
				});
				break;
			case "entranceH5Img":
				this.setState({
					entranceH5Img: item,
				});
				break;
		}
	};

	changeEntranceWebSeat = (e) => {
		this.setState({
			entranceWebSeat: e.target.value,
		});
	};

	changeEntranceH5Seat = (e) => {
		this.setState({
			entranceH5Seat: e.target.value,
		});
	};

	showBottomColor = () => {
		this.setState({
			isShowBottomColorPicker: true,
		});
	};

	handleCloseBottomColor = () => {
		this.setState({
			isShowBottomColorPicker: false,
		});
	};

	changeBottomColor = (color) => {
		this.setState({
			iconBottomColor: color.hex,
		});
	};

	render() {
		const {
			showFlag,
			entranceFlag,
			entranceWebImgList,
			entranceWebImg,
			entranceH5ImgList,
			entranceH5Img,
			entranceWebSeat,
			entranceH5Seat,
			iconBottomColor,
			isShowBottomColorPicker,
		} = this.state;

		return (
			<div className={styles.appearance_settings}>
				<Row>
					<Col span={3} className={styles.rightTitle}>
						显示状态:
					</Col>
					<Col span={19}>
						<div style={{ marginLeft: 12 }}>
							<Radio.Group onChange={this.changeShowFlag} value={showFlag}>
								<Radio value={1}>直接显示</Radio>
								<Radio value={2}>点击显示</Radio>
							</Radio.Group>
						</div>
					</Col>
				</Row>
				<Row style={{ marginTop: 24 }}>
					<Col span={3} className={styles.rightTitle}>
						入口图标状态:
					</Col>
					<Col span={19}>
						<div style={{ marginLeft: 12 }}>
							<Radio.Group
								onChange={this.changeEntranceFlag}
								value={entranceFlag}
							>
								<Radio value={1}>显示</Radio>
								<Radio value={2}>隐藏</Radio>
							</Radio.Group>
						</div>
					</Col>
				</Row>
				<Row style={{ marginTop: 24 }} className="codeStyle">
					<Col span={3} className={styles.rightTitle}>
						<div>入口图标样式:</div>
						<div className={styles.titleTips}>电脑端web</div>
					</Col>
					<Col span={21} style={{position:'relative'}}>
						<div className={styles.entranceWebBox}>
							{entranceWebImgList.map((item, index) => {
								return (
									<div className={styles.imgBox} key={index} >
										<div
											key={index}
											className={styles.entranceWebImgBox}
											onClick={() => this.changeImg(item, "entranceWebImg")}
                      style={{borderColor:entranceWebImg === item ? '#3E5BFF' : '#dcdfe6',position:"relative"}}
										>
											<img src={item} className={styles.entranceWebImg} />
                      {entranceWebImg === item ? (
                        <img src={staticPath+"/robotConfigImg/check-circle-fill.png"} className={styles.iconCheck} style={{bottom:-5,right:-4}} />
                      ) : (
                        ""
                      )}
										</div>
										
									</div>
								);
							})}
							<div
								className={styles.entranceWebImgBox}
								style={{ position: "relative",borderColor:entranceWebImg && entranceWebImgList.indexOf(entranceWebImg) === -1 ? '#3E5BFF' : '#dcdfe6'  }}
							>
								<Upload
									name='file'
									listType='picture'
									className='avatar-uploader'
									showUploadList={false}
									action='/cloud/file/upload'
									beforeUpload={this.beforeUpload}
									onChange={(info) =>
										this.handleChangeImage(info, "entranceWebImg")
									}
									accept='.png,.jpg'
								>
									{entranceWebImg && entranceWebImgList.indexOf(entranceWebImg) === -1 ? (
										<div>
											<img
												src={entranceWebImg}
												style={{ width: 74, height: 74 }}
											/>
											<img src={staticPath+"/robotConfigImg/check-circle-fill.png"} className={styles.iconCheck} style={{bottom:-5,right:-4}} />
										</div>
									) : (
										<span size="small">自定义</span>
									)}
								</Upload>
							</div>

              <div style={{marginLeft:20}}>
                <div className={styles.winSize} style={{ marginLeft: 12 }}>
                  <img src={entranceWebSeatRightBottom} />
                  <img
                    src={entranceWebSeatRightCenter}
                    style={{ marginLeft: 20 }}
                  />
                </div>
                <Radio.Group
                  className={styles.winSize}
                  style={{ marginLeft: 12 }}
                  value={entranceWebSeat}
                  onChange={this.changeEntranceWebSeat}
                >
                  <Radio style={{ marginLeft: 24, marginTop: 10 }} value={1}>
                    右下角
                  </Radio>
                  <Radio style={{ marginLeft: 35, marginTop: 10 }} value={2}>
                    右侧中部
                  </Radio>
                </Radio.Group>
              </div>
						</div>
					</Col>
				</Row>
				<Row style={{ marginTop: 24}}  className="codeStyle">
					<Col span={3} className={styles.rightTitle}>
						<div>入口图标样式:</div>
						<div className={styles.titleTips}>移动端H5</div>
					</Col>
					<Col span={21} style={{position:'relative'}}>
						<div className={styles.entranceWebBox}>
							{entranceH5ImgList.map((item, index) => {
								return (
									<div className={styles.imgBox} key={index}>
										<div
											key={index}
											className={styles.entranceWebImgBox}
											onClick={() => this.changeImg(item, "entranceH5Img")}
                      style={{borderColor:entranceH5Img === item ? '#3E5BFF' : '#dcdfe6',position:"relative"}}
										>
											<img src={item} className={styles.entranceWebImg} />
                      {entranceH5Img === item ? (
                        <img src={staticPath+"/robotConfigImg/check-circle-fill.png"} className={styles.iconCheck} style={{bottom:-5,right:-4}} />
                      ) : (
                        ""
                      )}
										</div>
										
									</div>
								);
							})}
							<div
								className={styles.entranceWebImgBox}
								style={{ position: "relative",borderColor:entranceH5Img && entranceH5ImgList.indexOf(entranceH5Img) === -1 ? '#3E5BFF' : '#dcdfe6' }}
							>
								<Upload
									name='file'
									listType='picture'
									className='avatar-uploader'
									showUploadList={false}
									action='/cloud/file/upload'
									beforeUpload={this.beforeUpload}
									onChange={(info) =>
										this.handleChangeImage(info, "entranceH5Img")
									}
									accept='.png,.jpg'
								>
									{entranceH5Img && entranceH5ImgList.indexOf(entranceH5Img) === -1 ? (
										<div>
											<img
												src={entranceH5Img}
												style={{ width: 74, height: 74 }}
											/>
											<img src={staticPath+"/robotConfigImg/check-circle-fill.png"} className={styles.iconCheck} style={{bottom:-5,right:-4}} />
										</div>
									) : (
										<span size="small">自定义</span>
									)}
								</Upload>
							</div>

              <div style={{marginLeft:32}}>
                <div className={styles.winSize}>
                  <img src={entranceH5SeatRightBottom} />
                  <img src={entranceH5SeatRightCenter} style={{ marginLeft: 30 }} />
                  <img src={entranceH5SeatBottom} style={{ marginLeft: 30 }} />
                </div>

                <Radio.Group
                  className={styles.winSize}
                  value={entranceH5Seat}
                  onChange={this.changeEntranceH5Seat}
                >
                  <Radio style={{ marginLeft: 8, marginTop: 10 }} value={1}>
                    右下角
                  </Radio>
                  <Radio style={{ marginLeft: 10, marginTop: 10 }} value={2}>
                    右侧中部
                  </Radio>
                  <Radio style={{ marginLeft: 10, marginTop: 10 }} value={3}>
                    底部
                  </Radio>
                </Radio.Group>

                {entranceH5Seat === 3 ? (
                  <div
                    className={styles.winSize}
                    style={{ marginLeft: 12, marginTop: 10 }}>
                    <div style={{ paddingRight: 10 }}>底部入口背景颜色:</div>
                    <div>
                      <div className={styles.winSize}>
                        <div
                          style={{
                            background: iconBottomColor,
                            width: 20,
                            height: 20,
                          }}
                          className={styles.webWinColor}
                          onClick={this.showBottomColor}
                        />
                        <span>{iconBottomColor}</span>
                        {isShowBottomColorPicker ? (
                          <div style={{ position: "absolute", zIndex: "2",bottom:0 }}>
                            <div
                              style={{
                                position: "fixed",
                                top: "0px",
                                right: "0px",
                                bottom: "0px",
                                left: "0px",
                              }}
                              onClick={this.handleCloseBottomColor}
                            />
                            <ChromePicker
                              color={iconBottomColor}
                              onChangeComplete={this.changeBottomColor}
                            />
                          </div>
                        ) : (
                          ""
                        )}
                      </div>
                    </div>
                  </div>
                ) : (
                  ""
                )}
              </div>
						</div>
					</Col>
          
				</Row>
        <Divider />
			</div>
		);
	}
}

export default RightAppearance;
